<template>
    <div id="Swipers" class="swiper-center-big">
        <div v-if="SwiperContent.list && SwiperContent.list.length > 0">
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide v-for="(cycleImg,index) in SwiperContent.list" :key="index" >
                    <div class="swiper-slide" @click="clickSwiper(cycleImg)">
                        <!--视频-->
                        <div class="img-wrap" v-if="cycleImg.mediaType == 0">
                            <span class="item-mark">{{cycleImg.mark}}</span>
                            <video
                                    v-if="videoIndex == index && !videoBtnShow"
                                    ref="video"
                                    id="myVideo"
                                    class="js_myVideo myVideo width-full"
                                    :x5-playsinline="isIphone"
                                    :playsinline="isIphone"
                                    webkit-playsinline="true"
                                    x-webkit-airplay="true"
                                    preload
                                    loop="loop"
                                    :poster="''"
                                    :autoplay="false"

                                    :x5-video-player-type="isIphone ? false : 'h5'"
                                    :video-player-type="isIphone ? false : 'h5'"
                                    :x5-video-player-fullscreen='isIphone ? false : true'

                                    controls="controls"
                                    x5-video-ignore-metadata='true'
                                    x5-video-orientation="portraint"
                                    @ended="closeVideo"
                                    video-orentation="portraint">
                                <source :src="cycleImg.url" type='video/mp4'>
                                您的浏览器不支持 video 标签。
                            </video>
                            <div class="width-height-full" v-if="videoBtnShow || videoIndex != index">
                                <img class="swiper-center-poster" v-if="cycleImg.poster" :src="cycleImg.poster" alt=""/>
                                <img class="swiper-center-poster" src="../../../assets/images/common/nw_bg.png" alt=""/>
                            </div>
                            <img class="video-icon positionAbCenter" v-if="videoBtnShow || videoIndex != index" @click="playVideo()" src="../../../assets/images/common/pause_icon.png" alt=""/>
                        </div>
                        <!--图片-->
                        <div class="img-wrap" v-else-if="cycleImg.mediaType == 1 || !cycleImg.mediaType">
                            <span class="item-mark">{{cycleImg.mark}}</span>
                            <img class="width-full booking-item-top-img" :src="cycleImg.url"/>
                        </div>
                    </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>
<script>

    export default {
        name: 'SwiperCenterBig',
        props: {
            SwiperContentProp: {
                type: Object
            },
        },
        data() {
            return {
                swiperOption: {
                    direction: 'horizontal',
                    // 如果需要前进后退按钮
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    onSlideChangeEnd: function(swiper){
                        let that = this;
                        this.videoIndex = swiper.activeIndex;
                        this.$emit('changeIndex',swiper.activeIndex);
                        this.videoBtnShow = true;
                        // setTimeout(()=>{
                        //     let myVideo=this.$refs.video;
                        //     if(myVideo){
                        //         console.log(myVideo[0])
                        //         myVideo[0].addEventListener('pause',function(){
                        //             that.videoBtnShow = true;
                        //         });
                        //     }
                        // },50)
                        // this.swiperSlideEnd();
                    }.bind(this),
                    // observer: true,
                    // observeParents: true,
                    // speed:500,
// //                    autoplayDisableOnInteraction:false,
//                     effect : 'coverflow',
//                     slidesPerView: 1.4,
//                     centeredSlides: true,
//                     // spaceBetween : -document.documentElement.clientWidth/375 * 120 ,
//                     coverflow: {
//                         rotate: 0,
//                         stretch: 0,
//                         depth: 500,
//                         modifier: 1,
//                         slideShadows : false
//                     }
                },
                videoIndex:0,
                isPlay:false,
                videoShow:false,
                videoBtnShow:true,
                SwiperContent:{
                    list:[
                        // {
                        //     mediaType:1,
                        //     url:'https://oss.pg.yibaotong.top/images/activity/circle/1023gift/bbd.png',
                        //     mark:'',
                        // },
                    ]
                }
            }
        },
        created(){
            // if(this.SwiperContent.list && this.SwiperContent.list.length > 1){
            //     this.swiperOption.loop = true;
            // }
        },
        mounted(){
            let that = this;
            this.SwiperContent = Object.assign({},this.SwiperContent,this.SwiperContentProp);
            // setTimeout(()=>{
            //     let myVideo=this.$refs.video;
            //     if(myVideo){
            //         myVideo[0].addEventListener('play',function(){
            //             that.videoBtnShow = false;
            //         });
            //     }
            // },50)

        },
        methods:{
            prev(){
                this.$refs.mySwiper.swiper.slidePrev();
            },
            next(){
                this.$refs.mySwiper.swiper.slideNext();
            },
            clickSwiper(obj){
                this.$emit('clickSwiperItem',obj)
            },
            playVideo(){
                let that = this;
                this.videoShow = true;
                this.videoBtnShow = false;
                setTimeout(()=>{
                    var myVideo=this.$refs.video[0];
                    this.$refs.video[0].play();
                },50)
            },
            closeVideo(){
                this.$refs.video[0].pause();
                this.videoShow = false;
                setTimeout(()=>{
                    this.videoShow = true;
                    this.videoBtnShow = true;
                },100)
            },
        },
        watch:{
            SwiperContent:function (val) {
                // if(Object.keys(val).length){
                //     if(this.SwiperContent.list.length > 1){
                //         this.swiperOption.loop = true;
                //     }
                // }
            },
            SwiperContentProp:function (val) {
                this.SwiperContent = Object.assign({},this.SwiperContent,val);
            }
        }
    }

</script>
<style lang="scss" scoped>
    @import url($css_root + 'css/swiper.min.css');
    .swiper-pagination-bullet-active{
        width: 16px;
        background-color: #fe4b4b;
    }
    .swiper-slide{
        transition: all .5s;
        overflow: unset;
        .booking-item-top-img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            background-color: #fff;
        }
    }
    .swiper-pagination-bullet-active{
        width: 16px;
        background-color: #fe4b4b;
    }
    .swiper-slide{
        overflow: unset;
        .img-wrap{
            transition: all .5s;
            background-color: #fff;
            width: 1.5rem;
            height: 2.08rem;
            display: block;
            left: 0;
            right: 0;
            margin: auto;
            position: relative;
            top: 1.15rem;
            transform: translateY(-50%);
            .booking-item-top-img{
                object-fit: cover;
                width: 100%;
                height: 100%;
                border-radius: 3px;
            }
            .myVideo{
                position: relative;
                transform: translateY(-50%);
                top: 50%;
            }
        }
    }
    .swiper-slide-active{
        .img-wrap{
            width: 1.8rem;
            height: 2.3rem;
        }
    }
    .swiper-center-big{
        width: 3.55rem;
        height: 2.6rem;
        display: block;
        position: relative;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #fff;
    }
    .swiper-container{
        height: 2.6rem;
    }
    .item-mark{
        padding: 0 .1rem;
        height: .24rem;
        line-height: .24rem;
        background-color: #FDD909;
        color: #995900;
        font-size: .12rem;
        display: inline-block;
        border-top-left-radius: .1rem;
        border-bottom-right-radius: .1rem;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
    .video-icon{
        width: 40%;
    }
    .swiper-center-poster{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>